<template>
  <view class="moreOrderDetail">
    <view class="flexBox orderStatus">
      <view class="status">
        <!--        <image :src="orderStatusObj[orderStatus].img"></image>-->
        {{ orderStatusObj[orderStatus].text }}
      </view>
      <view v-if="!!orderStatusObj[orderStatus].tips" class="tips">{{ orderStatusObj[orderStatus].tips }}</view>
      <view v-show="orderAllInfo.paid_button_show && orderStatus == 10">
        <u-count-down
          :time="surplusTime"
          format="DD:HH:mm:ss"
          auto-start
          millisecond
          @change="onChange"
        >
          <view class="time">
            剩余时间：
            <text class="time__item">{{ timeData.days }}天</text>
            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours }}时</text>
            <text class="time__item">{{ timeData.minutes }}分</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <view class="flexBox address">
      <image src="../../static/image/dash_line.png" class="lineBg" />
      <image src="../../static/image/location.png" class="addressImg" />
      <view class="address_right">
        <text>{{ orderAllInfo.receiver_province_name }} {{ orderAllInfo.receiver_city_name }} {{ orderAllInfo.receiver_area_name }} {{ orderAllInfo.receiver_town_name }}</text>
        <view class="detail">{{ orderAllInfo.receiver_detail_address }}</view>
        <text>{{ orderAllInfo.receiver_name }} {{ orderAllInfo.mobile }}</text>
      </view>
    </view>
    <view :style="{'height' : listOrderItems.length > 10 ? '1900rpx' : 'auto','overflow': 'hidden', 'marginTop' : '16rpx', 'background' : '#FFF', 'borderRadius' : '8rpx'}">
      <view v-for="(result, resultIndex) in listOrderItems" :key="resultIndex" class="itemShop">
        <image :src="result.product_pic" />
        <view class="shopInfo">
          <view class="title">{{ result.product_name }}</view>
          <view v-if="result.activity_type == 10" class="te-img"><text class="t-icon t-icon-tejia_tongyong_1" /><view class="code">编码：{{ result.product_code }}</view></view>
          <view v-if="result.activity_type == 20" class="te-img"><text class="t-icon t-icon-manjian_tongyong_1" /><view class="code">编码：{{ result.product_code }}</view></view>
          <view v-if="result.activity_type == 30" class="te-img"><text class="t-icon t-icon-tejia_tongyong_1" /><text class="t-icon t-icon-manjian_tongyong_1" /><view class="code">编码：{{ result.product_code }}</view></view>
          <view class="price">
            <view class="speci"><text>￥{{ result.endPrice }}</text>/{{ result.unit_name }}</view>×{{ result.buyyer_count }}
          </view>
        </view>
      </view>
    </view>
    <view v-if="listOrderItems.length > 10" class="flexBox moreLook" @click="moreOrder">
      查看全部商品<text class="font_family icon-a-arrowright_tongyong_2" />
    </view>
    <view class="orderInfo">
      <view class="title">订单信息</view>
      <view class="allInfo">
        <view v-for="(item, index) in infoList" :key="index" class="flexBox info" @click="goChild(item)">
          {{ item.name }}
          <view v-if="!!item.str" class="inputRight">{{ orderAllInfo.remark }}</view>
          <text v-else>{{ orderAllInfo[item.key] }}</text>
        </view>
      </view>
    </view>
    <view class="orderInfo">
      <view class="title">价格明细</view>
      <view class="allInfo">
        <view v-for="(item, index) in priceList" :key="index" class="flexBox info">
          {{ item.name }}
          <text v-if="!!item.str" style="color: #FF5533;font-weight: 700;">{{ item.str }}{{ orderAllInfo[item.key] }}</text>
          <text v-else>{{ orderAllInfo[item.key] }}</text>
        </view>
        <view class="footer">
          结算金额：<text>¥{{ orderAllInfo.paid_amount }}</text>
        </view>
      </view>
    </view>
    <view class="footerPayFaker" />
    <view class="footerPay">
      <Footer :order-info="footerParams" :show-time-flag="false" :use-place="'detail'" @showPop="showPop" @showCancel="showCancel" @changeShow="changeShow" />
    </view>
    <canclePop :cancle-show.sync="cancleShow" :cancle-params.sync="cancleParams" @cancelCom="cancelCom" />
  </view>
</template>

<script>
import { getOrderDetail, addShopCar, confrimRece, cancleOrder } from '@/api/orderApi';
import Footer from '@/components/order-list/Footer';
import canclePop from '@/components/order-list/canclePop';

export default {
  components: {
    Footer,
    canclePop
  },
  data() {
    return {
      cancleParams: {},
      cancleShow: false,
      orderStatus: 20,
      goPayFlag: false,
      timeData: {},
      surplusTime: '', // 计算后的时间戳
      orderStatusObj: {
        '9': {
          img: '../../static/orderIcon/customer.png',
          text: '待审批'
        },
        '10': {
          img: '../../static/orderIcon/customer.png',
          text: '待付款'
        },
        '20': {
          img: '../../static/orderIcon/customer.png',
          text: '待客服处理',
          tips: '您提交了订单，请等待鑫方盛客服处理确认'
        },
        '30': {
          img: '../../static/orderIcon/customer.png',
          text: '待配货'
        },
        '40': {
          img: '../../static/orderIcon/customer.png',
          text: '待出库'
        },
        '50': {
          img: '../../static/orderIcon/customer.png',
          text: '待发货'
        },
        '60': {
          img: '../../static/orderIcon/customer.png',
          text: '待收货'
        },
        '70': {
          img: '../../static/orderIcon/customer.png',
          text: '已收货待结算'
        },
        '80': {
          img: '../../static/orderIcon/customer.png',
          text: '订单成功'
        },
        '90': {
          img: '../../static/orderIcon/customer.png',
          text: '订单成功'
        },
        '100': {
          img: '../../static/orderIcon/customer.png',
          text: '已取消'
        },
        '110': {
          img: '../../static/orderIcon/customer.png',
          text: '已关闭'
        }
      },
      infoList: [
        { name: '订单号', key: 'order_id' },
        { name: '下单时间', key: 'create_at' },
        { name: '配送方式', key: 'sent_type_text' },
        { name: '支付方式', key: 'settleWay' },
        { name: '发票', key: 'make_invoice_text', href: `/orders/seeInvoice/index` },
        { name: '资质文件', key: 'quality_file_required_text' },
        { name: '备注', key: 'remark', str: '如有定制、加工、装卸等增值服务需求请咨询客服' },
      ],
      priceList: [
        { name: '商品金额', key: 'shopPrice', str: '￥' },
        { name: '运费', key: 'shipping_fee', str: '￥' },
        { name: '运费分摊', key: 'separate_shipping_fee_text' },
        { name: '满减', key: 'fullPrice', str: '-￥' },
        { name: '优惠券', key: 'coupon_real_value', str: '-￥' },
      ],
      platform: '',
      listOrderItems: [],
      orderAllInfo: {
        paid_button_show: false,
        receiver_province_name: '',
        receiver_city_name: '',
        receiver_area_name: '',
        receiver_town_name: '',
        receiver_detail_address: '',
        receiver_name: '',
        mobile: '',
        remark: '',
        shopPrice: 0,
        shipping_fee: 0,
        separate_shipping_fee_text: '',
        fullPrice: 0,
        coupon_real_value: 0,
        paid_amount: 0,
      },
      footerParams: {}, //传递footer组件
      order_id: '',
      expressStatus: {
        '10': '快递',
        '20': '快运-送货上门',
        '21': '快运-站点自提',
        '30': '专车包车',
        '40': '鑫方盛物流',
        '50': '上门自提',
        '51': '厂家直送',
        '52': '配送客户自提',
      }
    }
  },
  onLoad(option) {
    const { id } = option
    this.order_id = id
    this.getPlat()
    this.getOrderDetail(id)
  },
  methods: {
    onChange(e) {
      this.timeData = e
    },
    goChild(item) { // 查看发票
      if (!!item.href && this.orderAllInfo.make_invoice == 10) {
        var url = `${item.href}?id=${this.footerParams.order_id}`
        uni.navigateTo({ url: url })
      }
    },
    async cancelCom() { // 取消订单
      const res = await cancleOrder(this.cancleParams)
      if (res.code == 0) {
        const toast = () => this.$u.toast('取消成功')
        this.cancleShow = false
        this.getOrderDetail(this.order_id, toast)
      } else {
        this.$u.toast(res.message)
      }
    },
    changeShow() { // 取消订单按钮显示
      this.footerParams.cancleBtnShow = !this.footerParams.cancleBtnShow
    },
    showPop() { // 更新订单底部弹出
      this.cancleShow = true
    },
    showCancel(obj) { // 更新取消订单所需参数
      this.cancleParams = obj
    },
    async confrimRece() { // 确认收货
      const res = await confrimRece({ order_id: this.orderAllInfo.order_id })
      this.$u.toast(res.msg)
    },
    async addShopCar() { // 再次购买
      const { memberId } = this.vuex_accountInfo
      const { warehouseCode, cityCode } = this.vuex_cityInfo
      var skuIdNumlist = this.listOrderItems.map((item) => {
        const { sku_id, sku_code, buyyer_count } = item
        return { skuId: sku_id, skuCode: sku_code, skuNum: buyyer_count }
      })
      const params = {
        member_id: memberId,
        cityId: cityCode,
        warehouseId: warehouseCode,
        source: '40', // android=>10;ios=>20;wap=>30;pc=>40
        skuIdNumlist
      }
      const res = await addShopCar(params)
      if (res.code == '0') {
        uni.redirectTo({
          url: '/purchaseOrder/index'
        })
      } else {
        this.$u.toast(res.message || res.errorMessage)
      }
    },
    getPlat() { // 获取平台值
      const { accountType = 20 } = this.vuex_memberInfo || {}
      switch (accountType) { //  账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
        case 10:
          this.platform = 10
          break
        case 20:
          this.platform = 20
          break
        case 30:
          this.platform = 20
          break
        case 39:
          this.platform = 30
          break
        case 40:
          this.platform = 30
          break
        default:
          this.platform = 20
          break
      }
    },
    numberFormat(value) {
      var v = parseFloat(value)//强转Int，毕竟有可能返回是String类型的数字
      return v.toFixed(2)
    },
    getOrderDetail(id, callBack) { // 订单详情获取
      const { memberId } = this.vuex_accountInfo
      const params = {
        order_id: id,
        member_id: memberId,
        platform: this.platform
        // order_id: 66234554715,
        // member_id: 886312,
        // platform: this.platform
      }
      getOrderDetail(params).then((res) => {
        if (res) {
          this.footerParams = { cancleBtnShow: false, ...res, order_id: res.orderExt.order_id, sent_type: res.orderExt.sent_type, paid_amount: res.orderBase.paid_amount, pageType: 'detail',
            order_status: res.orderBase.order_status, final_sent_type: res.orderExt.final_sent_type, cancle_apply_show: res.cancle_apply_show, paid_type: res.orderBase.paid_type,
            platform: res.orderExt.platform, authorityList: res.authorityList }
          const { listOrderItems, orderExt: { create_at, order_id, original_file, file_copies, receiver_province_name, receiver_city_name, receiver_area_name, receiver_town_name, receiver_detail_address, sent_type,
          }, listAddressReceiver, orderBase: { order_status, make_invoice, quality_file_required, separate_shipping_fee, final_total_amount, shipping_fee,
            paid_amount }, orderCoupon, full_amount_reduce_value, full_quantity_reduce_value, settleWay, listOrderRemark, total_promotion_value,
          paid_button_show, buy_again_button, limit_time, current_time, self_take_in_str } = res
          var nowPrice = separate_shipping_fee == 10 ? shipping_fee : 0 // 是否运费分摊
          var shopPrice = this.numberFormat(final_total_amount - (total_promotion_value - full_amount_reduce_value - full_quantity_reduce_value) - nowPrice)
          // operator_role 10-客户 20 - 客服   operate_type 50 - 客户下单备注
          var remarkList = (!!listOrderRemark && listOrderRemark.length > 0) ? listOrderRemark.filter((item) => item.operator_role == 10 && item.operate_type == 50) : ''
          var remark = (!!remarkList && remarkList.length > 0) ? remarkList[0]['remark'] : ''
          var textOrigin = original_file == 10 ? '（带红章）' : '（不带红章）'
          this.orderStatus = order_status // 订单状态
          this.surplusTime = Number(limit_time) - Number(current_time)
          this.orderAllInfo = {
            buy_again_button, // 再次购买按钮显示
            paid_button_show, // 立即支付按钮显示
            receiver_province_name,
            receiver_city_name,
            receiver_area_name,
            receiver_town_name,
            receiver_detail_address,
            mobile: listAddressReceiver?listAddressReceiver[0].mobile:'',
            receiver_name: listAddressReceiver?listAddressReceiver[0].receiver_name:'',
            remark, //备注
            file_copies,
            original_file,
            sent_type, // 配送方式
            sent_type_text: this.expressStatus[sent_type],
            create_at,
            make_invoice, //开具发票
            make_invoice_text: make_invoice == 10 ? '纸质发票' : make_invoice == 20 ? '不开发票' : '', //开具发票
            quality_file_required, //资质文件
            quality_file_required_text: quality_file_required == 10 ? `${file_copies}份${textOrigin}` : quality_file_required == 20 ? '不需要' : '', //资质文件
            separate_shipping_fee, // 运费单开
            separate_shipping_fee_text: separate_shipping_fee == 10 ? '运费单开' : separate_shipping_fee == 20 ? '运费分摊' : '', // 运费单开
            final_total_amount, // 订单金额
            shopPrice, // 计算后的订单金额
            shipping_fee: separate_shipping_fee == 20 ? 0 : shipping_fee, // 运费
            coupon_real_value: orderCoupon ? orderCoupon.coupon_real_value : '', // 优惠券使用金额
            paid_amount, // 结算金额
            full_amount_reduce_value, // 满金额减的金额数
            full_quantity_reduce_value, // 满数量减的金额数
            fullPrice: (full_amount_reduce_value + full_quantity_reduce_value) || 0, // 满减
            settleWay, // 支付方式
            listOrderRemark, // 订单备注集合
            order_id,
            self_take_in_str,
          }
          if (sent_type === 50) {
            this.infoList.splice(3, 1, {
              name: '自提时间', key: 'self_take_in_str'
            })
          }
          this.listOrderItems = listOrderItems.map((item) => {
            const { sale_price, activity_type, promotion_value, origin_buyer_count, fare } = item
            var showPrice = sale_price
            var specialOffer = 0
            if (activity_type == 10) {
              specialOffer = promotion_value / origin_buyer_count
            }
            if (separate_shipping_fee == 20) {
              showPrice = (fare / origin_buyer_count) + sale_price
            }
            var endPrice = (showPrice - specialOffer).toFixed(2)
            return { ...item, endPrice }
          })
        }
        callBack && callBack()
      })
    },
    moreOrder() { // 查看商品

    },
  }
}
</script>

<style>
</style>
<style scoped lang="scss">
page {
  background:$uni-f5bg-color;
}
.time {
  color:$uni-text-color-orange;
  margin-top: 8rpx;
}
.moreOrderDetail {
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  .footerPayFaker {
    width: 100%;
    height: 160rpx;
  }
  .footerPay {
    width: 100%;
    height: 160rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    padding: 18rpx 34rpx;
    box-sizing: border-box;
    background:$uni-bg-color;
  }
  .orderInfo {
    width: 100%;
    margin-top: 16rpx;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    .title {
      display: flex;
      width: 100%;
      padding: 16rpx;
      box-sizing: border-box;
      font-weight: bold;
      color: $uni-text-color;
      font-size: $uni-font-size-base;
      border-bottom: 2rpx solid $uni-border-gray;
    }
    .allInfo {
      padding-bottom: 16rpx;
      box-sizing: border-box;
    }
    .info {
      justify-content: space-between;
      padding: 16rpx 16rpx 0rpx 16rpx;
      box-sizing: border-box;
      color: #666;
      .inputRight {
        width: 80%;
        display: flex;
        justify-content: flex-end;
      }
      /deep/.u-input {
        width: 60% !important;
        margin: 0 !important;
        padding: 0 !important;
      }
      text {
        color: $uni-text-color;
      }
    }
    .footer {
      color: #666;
      font-size: $uni-font-size-sm;
      font-weight: normal;
      text-align: right;
      padding: 16rpx 16rpx 0rpx 16rpx;
      text {
        color: $uni-text-color-orange;
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }
    }
  }
  .orderStatus {
    width: 100%;
    justify-content: center;
    padding: 20rpx 0rpx;
    flex-direction: column;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    .status {
      display: flex;
      align-items: center;
      align-content: center;
      color: $uni-text-color-orange;
      font-size: $uni-font-size-base;
      font-weight: bold;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
    .tips {
      color: $uni-text-color;
      font-size: $uni-font-size-sm;
      font-weight: normal;
      margin-top: 8rpx;
    }
  }
  .address {
    padding: 24rpx;
    box-sizing: border-box;
    width: 100%;
    margin-top: 16rpx;
    position: relative;
    justify-content: flex-start;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    .lineBg {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 10rpx;
      width: 100%;
    }
    .addressImg {
      width: 46rpx;
      height: 48rpx;
      flex-shrink: 0;
    }
    .address_right {
      color: $uni-text-color;
      font-size: 22rpx;
      font-weight: normal;
      margin-left: 28rpx;
      view {
        color: $uni-text-color;
        font-size: $uni-font-size-base;
        font-weight: bold;
        margin: 12rpx 0rpx;
      }
    }
  }
  .itemShop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 16rpx;
    box-sizing: border-box;
    image {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    .shopInfo {
      width: 100%;
      .title {
        color: $uni-text-color;
        font-size: $uni-font-size-sm;
        font-weight: normal;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
      }
      .te-img{
        display: flex;
        .t-icon{
          width: 68rpx;
          height: 34rpx;
          margin: 8rpx 10rpx 0 0;
        }
      }
      .code {
        color:$uni-text-color-tips;
        font-size: $uni-font-size-sm;
        font-weight: normal;
        margin-top: 8rpx;
      }
      .price {
        display: flex;
        justify-content: space-between;
        color:$uni-text-color-tips;
        font-size: $uni-font-size-sm;
        font-weight: normal;
        margin-top: 8rpx;
        .speci {
          display: flex;
          color: $uni-text-color;
          font-size: $uni-font-size-sm;
          font-weight: normal;
          text {
            color: $uni-text-color-orange;
            font-size: $uni-font-size-sm;
            font-weight: bold;
          }
        }
      }
    }
  }
  .moreLook {
    justify-content: center;
    font-weight: normal;
    padding: 18rpx 0 24rpx 0rpx;
    color:$uni-text-color-tips;
    font-size: $uni-font-size-sm;
    background: $uni-bg-color;
    .font_family {
      font-size:$uni-font-size-lg;
      color:$uni-text-color-tips;
      margin-left: 6rpx;
    }
  }
  .flexBox {
    display: flex;
    align-content: center;
    align-items: center;
  }
}
</style>
